<style>
.more-theme-list{padding-left:15px;padding-top:20px;margin-bottom:10px}
.more-theme-item{padding:4px;margin:0 6px 15px 0;display:inline-block;border:1px solid transparent}
.more-theme-item img{width:80px;height:50px;background:#f5f7f9;box-sizing:border-box;border:1px solid #f5f7f9;cursor:pointer}
.more-theme-item.active,.more-theme-item:hover{border-color:#5fb878}
.more-menu-item{color:#595959;height:50px;line-height:50px;font-size:16px;padding:0 25px;border-bottom:1px solid #e8e8e8;font-style:normal;display:block}
.more-menu-item:first-child{border-top:1px solid #e8e8e8}
.more-menu-item:hover{color:#595959;background:#f6f6f6}
.more-menu-item .layui-icon{font-size:18px;padding-right:10px}
.more-menu-item:after{color:#8c8c8c;right:16px;content:"\e602";position:absolute;font-family:layui-icon!important}
.more-menu-item.no-icon:after{display:none}
.set-item-label{height:38px;line-height:38px;padding-left:20px;display:inline-block}
.set-item-ctrl{height:38px;line-height:38px;display:inline-block}
.set-item-ctrl>*{margin:0!important}
</style>
<div class="layui-card-header">主题设置</div>
<div class="more-theme-list">
    <div class="more-theme-item active"><img src="/static/admin/img/theme-admin.png"/></div>
    <div class="more-theme-item" data-theme="theme-cyan"><img src="/static/admin/img/theme-cyan.png"/></div>
    <div class="more-theme-item" data-theme="theme-pink"><img src="/static/admin/img/theme-pink.png"/></div>
</div>
<!-- 导航 -->
<div class="more-menu-list">
    <a class="more-menu-item" href="https://www.veitool.com/" target="_blank"><i class="layui-icon layui-icon-auz" style="font-size:18px;"></i> Veitool官方</a>
    <a class="more-menu-item" href="https://layui.dev/" target="_blank"><i class="layui-icon layui-icon-read" style="font-size:18px;"></i> Layui文档</a>
</div>
<!-- 控制开关 -->
<div class="layui-form" style="margin:25px 0;" lay-filter="more-set-form">
    <div class="layui-form-item">
        <label class="set-item-label">内容页脚：</label>
        <div class="set-item-ctrl">
            <input id="setFooter" lay-filter="setFooter" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
        <label class="set-item-label">多标签：</label>
        <div class="set-item-ctrl">
            <input id="setMoreTab" lay-filter="setMoreTab" type="checkbox" lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>
</div>
<script>
layui.use(function(){
    var $ = layui.jquery;
    var form = layui.form,admin = layui.admin,$body = $('body');
    // 切换主题
    var $themItem = $('.more-theme-item');
    $themItem.click(function () {
        $themItem.removeClass('active');
        $(this).addClass('active');
        admin.changeTheme($(this).data('theme'));
    });
    var theme = $body.data('theme');
    if (theme) {
        $themItem.removeClass('active');
        $themItem.filter('[data-theme="' + theme + '"]').addClass('active');
    }
    // 关闭/开启页脚
    form.on('switch(setFooter)', function (data) {
        var checked = data.elem.checked;
        admin.putSetting('closeFooter', !checked);
        checked ? $body.removeClass('close-footer') : $body.addClass('close-footer');
    });
    $('#setFooter').prop('checked', !$body.hasClass('close-footer'));
    // 关闭/开启多标签
    form.on('switch(setMoreTab)', function (data) {
        var checked = data.elem.checked;
        admin.putSetting('pageTabs', checked);
        admin.putTempData('indexTabs', undefined);
        location.reload();
    });
    $('#setMoreTab').prop('checked', layui.cache.bins.pageTabs);   
    form.render('radio', 'more-set-form');
    form.render('checkbox', 'more-set-form');
});
</script>